<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container class="container">
        <el-header>
          <UserHeader></UserHeader>
        </el-header>
        <el-main>
          <UserMain></UserMain>
        </el-main>
        <el-footer class="footer">
          <UserFooter></UserFooter>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import UserHeader from "@/components/UserHeader.vue";
import UserMain from "@/components/UserMain.vue";
import UserFooter from "@/components/UserFooter.vue";
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 1000px;
  margin: auto;
}

.footer {
  margin-top: auto;
}

/* .background {
    background-image: url('@/assets/1.jpg');
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
} */
</style>
-->
